<template>
  <div class="payValidateFilter">
    <el-form :inline="true" :model="formInline" class="form-inline" label-width="80px">
      <el-form-item label="货主搜索">
        <el-input v-model="formInline.company_name" placeholder="输入货主名称"></el-input>
      </el-form-item>
      <el-form-item label="收款人">
        <el-input v-model="formInline.person" placeholder="输入收款人姓名"></el-input>
      </el-form-item>
      <el-form-item label="车牌号">
        <el-input v-model="formInline.car_name" placeholder="输入车牌号"></el-input>
      </el-form-item>
      <el-form-item label="金额">
        <el-input v-model="formInline.money" placeholder="输入金额"></el-input>
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker v-model="formInline.time" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>

      <el-form-item label="支付状态">
        <el-select v-model="formInline.pay_status" placeholder="选择支付状态" clearable>
          <el-option label="未支付" value="1"></el-option>
          <el-option label="已支付" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付结果">
        <el-select v-model="formInline.zffs" placeholder="选择支付结果" clearable>
          <el-option label="中原支付未验证" value="1"></el-option>
          <el-option label="中原支付成功" value="111"></el-option>
          <el-option label="中原支付失败" value="11"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运单ID">
        <el-input v-model="formInline.bill_id" placeholder="输入运单ID"></el-input>
      </el-form-item>
      <el-form-item label="所属地区">
        <el-select v-model="formInline.area_status" placeholder="选择所属公司" @change="onSubmit">
          <el-option label="全部" :value="-1"></el-option>
          <el-option v-for="(item, index) in getOfficesList" :key="item" :label="item" :value="index"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item class="btnItem">
        <el-tooltip class="item" effect="dark" content="导出数据之前需要先选择时间" placement="bottom">
          <el-button @click="exportHandler">导出</el-button>
        </el-tooltip>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button class="btn" @click="resetTable">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getToken, getUserId } from '@/utils/tool'
import { getOfficesList } from '@/utils/tool'
export default {
  name: "payValidateFilter",
  data() {
    return {
      getOfficesList: getOfficesList(),
      formInline: {
        person: "", //收款人
        car_name: "", //车牌号
        money: "", //金额
        bill_id: "", //运单id
        time: "",
        pay_status: "",//支付状态
        zffs: "",//支付结果
        area_status: 0,
        company_name: "",
      }
    };
  },
  mounted() { },
  methods: {
    resetTable() {
      this.$emit("filterTable", false);
      this.formInline = {
        person: "", //收款人
        car_name: "", //车牌号
        money: "", //金额
        bill_id: "", //运单id
        time: "",
        pay_status: "",//支付状态
        zffs: "",//支付结果
        area_status: 0,
        company_name: "",
      };
    },
    onSubmit() {
      // let ableFilter = false;
      // for (let key in this.formInline) {
      //   let value = this.formInline[key];
      //   if (value) {
      //     ableFilter = true;
      //     break;
      //   }
      // }
      // if (ableFilter) {
      //   this.$emit("filterTable", {
      //     ...this.formInline,
      //     time: (this.formInline["time"] ? this.formInline["time"] : []).join("/")
      //   });
      // }

      this.$emit("filterTable", {
        ...this.formInline,
        time: (this.formInline["time"] ? this.formInline["time"] : []).join("/")
      });
    },
    exportHandler() {//导出数据
      console.log(this.formInline);
      if (!this.formInline.time) {
        this.$message.error('请先选择时间段!');
        return;
      }
      console.log(this.convertObjectToQueryString(this.formInline));
      window.open(`https://api.zhgylgl.com/api/admin/exportPayData?${this.convertObjectToQueryString(this.formInline)}&token=${getToken()}&userId=${getUserId()}`, '_blank', '');
    },
    convertObjectToQueryString(obj) {
      let queryString = '';
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (key == 'time') {
            queryString += key + '=' + obj[key].join('/') + '&';
          } else {
            queryString += key + '=' + obj[key] + '&';

          }
        }
      }
      return queryString.slice(0, -1);
    },
  }
};
</script>

<style lang="scss">
.payValidateFilter {
  .form-inline {
    display: flex;
    flex-wrap: wrap;

    .btnItem {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      .el-form-item__content {
        width: auto !important;
      }

      .btn {
        margin-right: 22px;
      }
    }

    .el-form-item__label {
      // min-width: 80%;
      overflow: hidden;
      white-space: nowrap;
    }

    .el-date-editor--daterange {
      width: 100%;

      .el-range-separator {
        width: 10% !important;
      }
    }

    .el-input,
    .el-select {
      width: 100%;
    }

    .el-form-item {
      display: flex;
      width: 20%;
      margin-right: 0;

      .el-form-item__content {
        width: 70%;
      }
    }
  }
}
</style>
